<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色权限配置</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #fff;
        }
        .config-container {
            background: #fff;
        }
        .config-section {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="config-container">
            <div class="config-section">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="角色管理" name="role">
                        <el-button type="primary" size="small" style="margin-bottom: 15px;" @click="addRole">添加角色</el-button>
                        <el-table :data="roles" style="width: 100%">
                            <el-table-column prop="name" label="角色名称"></el-table-column>
                            <el-table-column prop="permissions" label="权限">
                                <template slot-scope="scope">
                                    <el-tag v-for="perm in scope.row.permissions" 
                                           :key="perm" 
                                           size="small" 
                                           style="margin-right: 5px;">
                                        {{perm}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="editRole(scope.row)">编辑</el-button>
                                    <el-button type="text" size="small" 
                                             @click="deleteRole(scope.row)"
                                             :disabled="scope.row.name === '系统管理员'">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="用户管理" name="user">
                        <el-button type="primary" size="small" style="margin-bottom: 15px;" @click="addUser">添加用户</el-button>
                        <el-table :data="users" style="width: 100%">
                            <el-table-column prop="username" label="用户名"></el-table-column>
                            <el-table-column prop="email" label="邮箱"></el-table-column>
                            <el-table-column prop="role" label="角色">
                                <template slot-scope="scope">
                                    <el-tag size="small">{{scope.row.role}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button>
                                    <el-button type="text" size="small" 
                                             @click="deleteUser(scope.row)"
                                             :disabled="scope.row.username === 'admin'">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <!-- 角色编辑对话框 -->
        <el-dialog :title="currentRole ? '编辑角色' : '新增角色'" :visible.sync="roleDialogVisible">
            <el-form :model="dialogRole" label-width="120px" size="small" v-if="dialogRole">
                <el-form-item label="角色名称">
                    <el-input v-model="dialogRole.name" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item label="权限">
                    <el-checkbox-group v-model="dialogRole.permissions">
                        <el-checkbox label="项目数据查看">项目数据查看</el-checkbox>
                        <el-checkbox label="项目数据编辑">项目数据编辑</el-checkbox>
                        <el-checkbox label="页面授权">页面授权</el-checkbox>
                        <el-checkbox label="项目控制权限">项目控制权限</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="roleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRole">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 用户编辑对话框 -->
        <el-dialog :title="currentUser ? '编辑用户' : '新增用户'" :visible.sync="userDialogVisible">
            <el-form :model="dialogUser" label-width="120px" size="small" v-if="dialogUser">
                <el-form-item label="用户名">
                    <el-input v-model="dialogUser.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="dialogUser.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="dialogUser.role" placeholder="请选择角色">
                        <el-option v-for="role in roles" :key="role.name" :label="role.name" :value="role.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="dialogUser.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="dialogUser.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="userDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'role',
                    roles: [
                        {
                            name: '系统管理员',
                            permissions: ['项目数据查看', '项目数据编辑',"项目控制权限","页面授权"]
                        },
                        {
                            name: '普通用户',
                            permissions: ['项目数据查看',"页面授权","项目控制权限"]
                        }
                    ],
                    users: [
                        {
                            username: 'admin',
                            email: 'admin@example.com',
                            role: '系统管理员'
                        }
                    ],
                    currentRole: null,
                    currentUser: null,
                    dialogRole: {
                        name: '',
                        permissions: []
                    },
                    dialogUser: {
                        username: '',
                        password: '',
                        role: '',
                        email: '',
                        phone: ''
                    },
                    roleDialogVisible: false,
                    userDialogVisible: false
                }
            },
            methods: {
                addRole() {
                    this.currentRole = null;
                    this.dialogRole = {
                        name: '',
                        permissions: []
                    };
                    this.roleDialogVisible = true;
                },
                editRole(role) {
                    this.currentRole = role;
                    this.dialogRole = JSON.parse(JSON.stringify(role));
                    this.roleDialogVisible = true;
                },
                deleteRole(role) {
                    if (role.name === '系统管理员') {
                        this.$message.warning('系统管理员角色不能删除');
                        return;
                    }
                    this.$confirm('确定要删除该角色吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.roles.indexOf(role);
                        if (index > -1) {
                            this.roles.splice(index, 1);
                        }
                        this.$message.success('角色删除成功');
                    });
                },
                saveRole() {
                    if (this.dialogRole.name) {
                        const index = this.roles.findIndex(r => r.name === this.currentRole?.name);
                        if (index > -1) {
                            this.roles.splice(index, 1, this.dialogRole);
                        } else {
                            this.roles.push(this.dialogRole);
                        }
                        this.roleDialogVisible = false;
                        this.$message.success('角色保存成功');
                    } else {
                        this.$message.warning('请输入角色名称');
                    }
                },
                addUser() {
                    this.currentUser = null;
                    this.dialogUser = {
                        username: '',
                        password: '',
                        role: '',
                        email: ''
                    };
                    this.userDialogVisible = true;
                },
                editUser(user) {
                    this.currentUser = user;
                    this.dialogUser = JSON.parse(JSON.stringify(user));
                    this.userDialogVisible = true;
                },
                deleteUser(user) {
                    if (user.username === 'admin') {
                        this.$message.warning('管理员账号不能删除');
                        return;
                    }
                    this.$confirm('确定要删除该用户吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.users.indexOf(user);
                        if (index > -1) {
                            this.users.splice(index, 1);
                        }
                        this.$message.success('用户删除成功');
                    });
                },
                saveUser() {
                    if (this.dialogUser.username && this.dialogUser.role) {
                        const index = this.users.findIndex(u => u.username === this.currentUser?.username);
                        if (index > -1) {
                            this.users.splice(index, 1, this.dialogUser);
                        } else {
                            this.users.push(this.dialogUser);
                        }
                        this.userDialogVisible = false;
                        this.$message.success('用户保存成功');
                    } else {
                        this.$message.warning('请填写完整信息');
                    }
                }
            }
        })
    </script>
</body>
</html>
